<template>
  <h1>{{ msg }}</h1>


  <button type="button" @click="count=count+2">count is: {{ count }}</button>
  <button type="button" @click="Add3">+3</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

let count = ref(0)

var Add3 = function(){
  count.value += 3;
}
//响应式原理
const user = {
  name: '佐助',
  age: 29,
  wife: {
    name: '小樱',
    age: 18
  }
}
const proxyUser = new Proxy(user, {
  get(target, prop){
    console.log('get方法调用了')
    return Reflect.get(target, prop);
  },
  set(target, prop, val){
    console.log('set方法调用了')
    return Reflect.set(target, prop, val);
  },
  deleteProperty(target, prop){
    console.log('delete方法调用了')
    return Reflect.deleteProperty(target, prop);
  }
})
console.log(proxyUser.name, 111)
proxyUser.name = 'burt';
console.log(proxyUser.name, 222)
delete proxyUser.name;
console.log(proxyUser.name, 333)
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
